//模块加载区
const gulp = require("gulp");
const connect = require("gulp-connect");
const fs = require("fs");
//gulp-concat 合并文件里面的内容
const concat = require("gulp-concat");

//npm install node-sass gulp-sass --save-dev
//需要安装python
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

//压缩图片
const imagemin = require('gulp-imagemin');

//获取src里所有的js文件目录
const findSync = require("./utils/index").findSync;
const scripts = require("./conf/index").scripts;
const scssJSON = require("./conf/index").scss;


//存放所有src里面的js文件路径
let scriptsPathArray = null;
//存放所有gulp scripts时需要执行的任务也就是gulp scripts-文件名的集合
let scriptsTaskArray = [];

let scssTaskArray = [];


//功能定义区
/**
 * @function init 初始化功能 , 编列了scripts路径还有创建了 scripts 指令;
 * @function watchScripts 根据scripts对象实现的 watch 监听封装
 * @function mergeMyScripts 根据scripts 对象实现的scripts指令拆分,文件合并
 * 
 */


function init(){
    scriptsPathArray = findSync("./src/scripts").map(path =>{
        return "./" + path.replace(/\\/g,"/")
    })
    //禁止数组；
    let scriptsUnSaveArray = ["!./src/scripts/libs/*.js"];
    scriptsPathArray = scriptsPathArray.concat(scriptsUnSaveArray);
    mergeMyScripts(scripts);
    mergeMyScss(scssJSON);
}

function watchScripts(json){
    for(let attr in json){
        gulp.watch(json[attr].src + "*.js",["scripts-" + attr]);
    }
}

function watchScss(json){
    for(let attr in json){
        gulp.watch(json[attr].src+"*.scss",["scss-"+attr]);
    }
}

//实现需要打包那个文件就执行gulp scripts-文件名,并且把文件名中的所有js打包成一个js文件
function mergeMyScripts(json){
    for(let attr in json){
        scriptsTaskArray.push("scripts-"+attr);
        gulp.task("scripts-" + attr,()=>{
            return gulp.src([json[attr].src+"*.js"])
            .pipe(concat(attr + ".js"))
            .pipe(gulp.dest("./dev/scripts"))
            .pipe(connect.reload())
        })
    }
}

function mergeMyScss(json){
    for(let attr in json){
        scssTaskArray.push("scss-" + attr);
        gulp.task("scss-"+attr,()=>{
            return gulp.src([json[attr].src + "*.+(scss|sass)"])
                    .pipe(concat(attr + ".scss"))
                    .pipe(sass())//执行编译
                    .pipe(gulp.dest("./dev/stylesheets"))
                    .pipe(connect.reload())
        })
    }
}

//指令定义区

/**
 * @task html :  转存html
 * @task connect : 服务器配置
 * @task watch : 监听
 * @task default : 自动开启环境
 * @task scripts : 打包js文件
 * 
 */

gulp.task("html",()=>{
    return gulp.src(["./src/*.html"]).pipe(gulp.dest("./dev"))
    //配合gulp-connect自动刷新功能的配置项
    .pipe(connect.reload());
})

//能创建成功
// gulp.task("scss",function(){
//     return gulp.src("./src/scss/*/*.scss")
//     .pipe(gulp.dest('./dev/stylesheets'));
// })


//随着html文件的改变，watch会自动更新，但是dev页面不会自动刷新，实时刷新需要connect.reload()。
//后面的第二个参数=gulp html,监听的文件发生改变时会执行的命令
gulp.task("watch",()=>{
    gulp.watch("./src/*.html",["html"]);
    gulp.watch("./src/scss/index/*.scss",["scss"])
    watchScripts(scripts);
    watchScss(scssJSON);
})

gulp.task("images",()=>{
    return gulp.src('./src/images/**/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dev/images'))
})

//连接服务器并且监听dev文件，而不是监听src，livereload为true的作用是src里的文件发生改变时在dev中的文件实时更新；
//livereload配合gulp html中的connect.reload()一起使用；
gulp.task("connect",()=>{
    connect.server({
        root : "dev",
        livereload : true,
    })
})

gulp.task("scripts",scriptsTaskArray);
gulp.task("scss",scssTaskArray);

//flag 1 : src/scripts 目录下的无论层级的js都转存在dist文件夹下的scripts目录
// gulp.task("scripts",()=>{
//     return gulp.src(scriptsPathArray)
//     .pipe(concat("index.js"))//把src/scripts中的所有js合并成一个index.js
//     .pipe(gulp.dest("./dev/scripts"))
//     .pipe(connect.reload());//也可以同时在页面刷新
// })

//更新需求：根据scripts-文件名,打包哪个文件
//思路：
// const scripts1 = {
//     "index" : {
//         src : "./src/scripts/index"
//     },
//     "login" : {
//         src : "./src/scripts/login"
//     }
// }
// for(let attr in json){
//     gulp.task("scripts-" + attr,()=>{
//         return gulp.src([scripts[attr].src+"*.js"])
//         .pipe(concat(attr + ".js"))
//         .pipe(gulp.dest("./dev/scripts"))
//         .pipe(connect.reload())
//     })
// }



//gulp.task("default",["connect","watch"]);

//初始化就建立dev项目结构
//gulp.task("default",["html","scss","scripts","images","connect","watch"]);

//在package.json里面修改scripts下的
//"scripts": {
//     "test": "echo \"Error: no test specified\" && exit 1"
//   },
//"test":~~修改为 "start" : "gulp gulp-dev"运行时 npm run dev开发环境就都跑起来了
//用./node_modules/bin/gulp也可以启动项目这可以启动多版本的gulp
//所以最后修改为"start" : "./node_modules/.bin/gulp gulp-dev"
//运行时npm start
gulp.task("gulp-dev",["html","scripts","scss","images","connect","watch"]);




// fs模块的帮助 => 取出文件夹下所有文件的名称;

// 初始化整个配置文件;

init();


//引入gulp-build
require("./gulp-build")